<template>
	<view class="address page">
		<view class="items">
			<scroll-view style="height: 100%;" class="scroll" scroll-y="true">
				<uni-swipe-action>
					<uni-swipe-action-item style="margin-bottom:10upx;display: block;" :right-options="options"  @click="del(index)"  v-for="(item,index) in addressList" :item="item" :key="index">
						<address-item style="width: 100%;" :edit="edit" :item="item" :key="index" class="item"></address-item>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</scroll-view>
		</view>
		<view class="btn" @click="toAddress">
			添加新地址
		</view>
	</view>
</template>

<script>
	import addressItem from '../../components/address-item/address-item.vue'
	import {showCorrect} from '@/toast/index.js'
	import {
		getMallAddress ,deleteMallAddress
	} from '@/api/address.js'
	export default {
		components: {
			addressItem
		},
		onShow() {
			this.edit = this.$Route.query.edit
			getMallAddress().then(res => {
				this.addressList = res.data
			})
		},
		methods: {
			del(index){
				deleteMallAddress(this.addressList[index].id).then(res => {
					 showCorrect("删除成功!")
					 this.addressList.splice(index,1)	
				})
			
			},
			toAddress() {
				this.$Router.push({
					path: "/pages/address/edit"
				})
			}
		},
		data() {
			return {
				edit: false,
				addressList: [],
				 options:[
				        {
				            text: '删除',
				            style: {
				                backgroundColor: 'red'
				            }
				        }
				      ]
			};
		}
	}
</script>

<style lang="stylus">
	.address
		background url(../../static/dbg.png) no-repeat
		background-size 100% 150upx
		background-color #EFEFEF
		display flex
		flex-direction column
		.items
			overflow hidden
			padding 0 20upx 
			flex 1
		.btn
			height 70upx
			background-color #F7895E
			color #FFFFFF
			display flex
			align-items center
			justify-content center
			font-size 24upx
</style>
